<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线编辑</title>
    <style>
        #titleField input{
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="other"></div>
    <script>
        function EditInPlaceField(id,parent,value){
            this.id = id;
            this.parent=parent;
            this.value = value || 'default value';
            this.createElement();
            this.bindEvents();
            this.containerElement.id = this.id;


        }
        EditInPlaceField.prototype.createElement = function(){
            // 1.创建Div
            // 2.挂载 this.value createTextNode
            // 3.挂载到 parent
            this.containerElement = document.createElement('div');

            this.staticElement = document.createElement('span');
            this.staticElement.appendChild(
                document.createTextNode(this.value)
                );
            
            this.containerElement.appendChild(this.staticElement);

            this.fieldElement = document.createElement('input');
            this.fieldElement.value = this.value;
            this.fieldElement.style.display = "none";
            this.containerElement.appendChild(this.fieldElement);

            this.parent.appendChild(this.containerElement);
            this.saveButton = document.createElement('input');
            this.saveButton.type ='button';

            this.saveButton.value='Save';
            this.saveButton.style.display = "none";
            this.containerElement.appendChild(this.saveButton);
            this.cancelButton = document.createElement('input');
            this.cancelButton.type ='button';
            this.cancelButton.value='Cancel';
            this.cancelButton.style.display = "none";
            this.containerElement.appendChild(this.cancelButton);

            
        }
        EditInPlaceField.prototype.switchToEditState = function(){
            this.fieldElement.style.display = "inline-block";
            this.staticElement.style.display= "none";
            this.saveButton.style.display = "inline-block";
            this.cancelButton.style.display = "inline-block";
            this.fieldElement.focus();

        }
        EditInPlaceField.prototype.switchToNormalState = function(){

            this.fieldElement.style.display = "none";
            this.staticElement.style.display= "block";
            this.saveButton.style.display = "none";
            this.cancelButton.style.display = "none";
        }
        EditInPlaceField.prototype.bindEvents = function(){
            this.staticElement.addEventListener('click',this.switchToEditState.bind(this));
            this.cancelButton.addEventListener('click',this.switchToNormalState.bind(this));
            this.saveButton.addEventListener('click',this.changeValue.bind(this))
            
            
        }
        EditInPlaceField.prototype.changeValue = function(){
            let newVal = this.fieldElement.value;
            this.staticElement.innerText = newVal;
            this.value = newVal;
            this.switchToNormalState();
        }
    var titleEditor = new EditInPlaceField('titleField',document.body,'华为可为');
    var titleEditor2 = new EditInPlaceField('666',document.getElementById('other'),'华为可为');
    </script>
</body>
</html>